<template>
	<view>
		<swiper class="swiper-class" indicator-dots="true" indicator-color="#282C35" indicator-active-color="#42B983"
		:autoplay="false" interval="1000" circular="true" vertical="false" @change="change"
		>
			<swiper-item class="item-1">1</swiper-item>
			<swiper-item class="item-2">2</swiper-item>
			<swiper-item class="item-3">3</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			change(e){
				console.log(" 改变时会触发"+JSON.stringify(e));
			}
		}
	}
</script>

<style>
	.swiper-class {
		height: 300rpx;
	}
	.item-1{
		height: 300rpx;
		background-color: antiquewhite;
		text-align: center;
		line-height: 300rpx;
	}
	.item-2{
		height: 300rpx;
		background-color: rosybrown;
		text-align: center;
		line-height: 300rpx;
	}
	.item-3{
		height: 300rpx;
		background-color: brown;
		text-align: center;
		line-height: 300rpx;
	}
</style>